<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云尚臻城用户注册页面</title>
    <!--注册页面icon-->
    <link href="img/reg_img/logo.png" rel="icon">
    <!--引入ElementUI的CSS样式库-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!--import regCss-->
    <link rel="stylesheet" href="css/regCss.css">
</head>
<body>
<div>
    <div id="reg_form">
        <h1>注册账户</h1>
        <p class="loginLink">已有帐号?&emsp;<a href="/login.html">登录</a></p>
        <form action="" method="">
            <!--用户名部分-->
            <p class="in">
                <span class="title">用户名</span>
                <input type="text" placeholder="用户名" v-model="user.username" @focus="setTips.display='block'"
                       @blur="setTips.display='none';checkUsername()">
            <p class="usernameTipsBg" v-bind:style="setTips">设置后不可更改,中英文均可,最长7个汉字或14个英文</p>
            <img class="success s1" src="img/reg_img/success-2x.png" v-bind:style="setS1Icon" alt="">
            <p class="tips usernameTips" v-text="usernameTips"></p>
            </p>
            <!--昵称部分-->
            <p class="in">
                <span class="title">昵&emsp;称</span>
                <input type="text" placeholder="昵称" v-model="user.nickname" @blur="checkNickname()">
                <img class="success s2" src="img/reg_img/success-2x.png" v-bind:style="setS2Icon" alt="">
            <p class="tips nicknameTips" v-text="nicknameTips"></p>
            </p>
            <!--密码部分-->
            <p class="in">
                <span class="title" id="password">密&emsp;码</span>
                <input :type="pwdType" v-model="user.password" @focus="pwdTips.display = 'block'"
                       @blur="pwdTips.display = 'none'" @input="checkPassword()" placeholder="密码">
            <p v-bind:class="pwdTipsIcon" @click="setPwdVisible" class="pwdTips" alt="">
            <p v-bind:class="showANDHide" v-bind:style="setVisible" class="showTOHideSet" @click="setPwdSVG"></p>
            </p>
            <!--密码提示框-->
            <ul class="tips passwordTips" v-bind:style="pwdTips">
                <li v-bind:style="pwdT1">
                    <img :src="passwordTips1" class="i i1" alt="">
                    长度为8~14个字符
                </li>
                <li v-bind:style="pwdT2">
                    <img :src="passwordTips2" class="i i2" alt="">
                    字母、数字以及标点符号至少包含2种
                </li>
                <li v-bind:style="pwdT3">
                    <img :src="passwordTips3" class="i i3" alt="">
                    不允许有中文、空格
                </li>
            </ul>
            <!--手机号部分-->
            <p class="in">
                <span class="title">手机号</span>
                <input type="text" placeholder="手机号" v-model="user.phone" @blur="checkPhone">
                <img class="success s4" src="img/reg_img/success-2x.png" v-bind:style="setS4Icon" alt="">
            <p class="tips phoneTips" v-text="phoneTips"></p>
            </p>
            <p class="in num">
                <span class="title">验证码</span>
                <input type="text" class="checkNum" v-model="user.checkNum" @input="checkNums" placeholder="验证码">
                <input type="button" id="getNumBT" @click="getCM" v-bind:disabled="sets" v-bind:style="getNumStyle"
                       v-bind:value="getCheckNum">
                <p class="tips checkNumTips" v-html="checkNumTips"></p>
            </p>
            <p class="regBT">
                <input type="button" v-bind:disabled="setRegBt" v-bind:style="setRegBtStyle" @click="reg()" class="regs" value="立即注册">
                <p class="checkBox"  @click="checked"><input type="checkbox">阅读并同意 <a href="">《云尚臻城用户协议》</a>和 <a href="">《云尚臻城隐私权保护声明》</a> </p>
            </p>
        </form>
    </div>
</div>
<!-- import VUE-->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!--import Axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import ElementUI -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--import regScript-->
<script src="js/regScript.js"></script>
</body>
</html>